<template>
	<view class="bot">
		<view class="zs_type">
			<view class="ymt_type_i" :class="form.type_id==1?'active':''" @click="form.type_id=1">我要投资</view>
			<view class="ymt_type_i" :class="form.type_id==2?'active':''" @click="form.type_id=2">我要招商</view>
		</view>
		<input class="text_a1" v-model="form.title" placeholder="请填写标题" />
		<textarea :maxlength='-1' class="text_a" v-model="form.desc" placeholder="请填写描述..."/>
<!-- 		<view class="imgList" v-show="imgs.length>0">
			<view class="image" v-for="(item,index) in imgs" :key='index' >
				<image class="img" :src="item" mode=""></image>
				<image class="close" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/close.png" mode="" @click="delImg(index)"></image>
			</view>
			<image class="shangchuan" @click="chooseImage" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/shangchuan.png" mode=""></image>
			<view class="image"></view>
		</view> -->
		<!-- <view class="item_i"><view class="item_t ">投资金额</view> <input  class="right" placeholder="请输入投资金额"  v-model="form.invest_money" /></view> -->
<!-- 		<view class="item_i"><view class="item_t ">所在区域</view>
			<picker class="right" @change="cityChange" @columnchange='cityChange1' mode = 'multiSelector' :range="cityList" range-key='city_name'>
				<view class="right" :class="city_id?'select_a':''">{{form.city_ids?form.city_names:'请选择区域'}}</view>
			</picker>
		</view> -->
		
		<view class="item_i"><view class="item_t must">相关产业链</view>
			<view class="right text" @click="toChooseChain">{{form.chain_names||'请输入选择产业链'}}</view>
		</view>
		<!-- <chain class="chain_v" ref="chain" :class="isshow?'showChain':''" @changeChain='changeChain' @touchmove.stop.prevent="()=>{}"></chain> -->
		
		<view class="item_i"><view class="item_t must">{{form.type_id==1?'投资类型':'招商类型'}}</view>
			<picker class="right" @change="typeChange" :range="form.type_id==1?typeList:typeList1" range-key='name'>
				<view class="right">{{form.type_id_1?form.type_name_1:'请选择类型'}}</view>
			</picker>
		</view>
<!-- 		<view class="item_i"><view class="item_t ">投资条件</view>
			<view class="right flex_zc">
				<view class="zc_item" :class="condition.findIndex(item=>item==1)>-1?'active':''" @click="changeZc(1)">土地优惠</view>
				<view class="zc_item" :class="condition.findIndex(item=>item==2)>-1?'active':''" @click="changeZc(2)">房租优惠</view>
				<view class="zc_item" :class="condition.findIndex(item=>item==3)>-1?'active':''" @click="changeZc(3)">税收优惠</view>
				<view class="zc_item" :class="condition.findIndex(item=>item==4)>-1?'active':''" @click="changeZc(4)">人才补贴</view>
				<view class="zc_item" :class="condition.findIndex(item=>item==5)>-1?'active':''" @click="changeZc(5)">产业基金配套</view>
			</view>
		</view> -->
		
		<view class="item_i"><view class=" ">PDF文件</view>
			<view class=" flex_zc">
				<view class="zc_item1 zc_item active" @click="updateF">{{form.files?(form.files_name.length>14?form.files_name.substr(0,14)+'...':form.files_name):'上传'}}</view>
				<image v-show="form.files" class="close" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/close.png" mode="" @click="form.files=''"></image>
			</view>
		</view>
		
		<!-- <view class="item_i"><view class="item_t ">联系人</view> <input  class="right" placeholder="请输入联系人" type="text" v-model="form.contact" /></view> -->
		<view class="item_i">
			<view class="item_t must">联系方式</view> 
			<view class="flex_sb">
				<input  class="right" placeholder="请输入联系方式" type="number" v-model="form.mobile" />
				<button v-if="!form.mobile" class="zc_item" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">获取</button>
			</view>
		</view>
		
		<view class="item_i">
			<view class="item_t">发布日期</view> 
			<uni-datetime-picker type="date" :clear-icon="false" v-model="form.create_date"/>
		</view>
		<!-- <view class="item_i"><view class="item_t">查看类型</view>
			<view class="right flex_zc">
				<view class="zc_item1 zc_item" :class="form.price==0?'active':''" @click="form.price=0">免费</view>
				<view class="zc_item1 zc_item" :class="form.price==9.9?'active':''" @click="form.price=9.9">9.9</view>
				<view class="zc_item1 zc_item" :class="form.price==99?'active':''" @click="form.price=99">99</view>
				<view class="zc_item1 zc_item" :class="form.price==999?'active':''" @click="form.price=999">999</view>
				<view class="zc_item1 zc_item" :class="form.price==9999?'active':''" @click="form.price=9999">9999</view>
			</view>
		</view> -->
		<view class="btn" @click="fbInfo">发 布</view>
		<choose-chain ref="chooseChain" :chainList='chainList' @getChain='cChain'></choose-chain>
	</view>
</template>

<script>
	import chooseChain from '@/components/chooseChain/chooseChain.vue'
	import chain from '@/components/chain/chain'
	import {tzzs , city , getWxappUserPhoneByCode} from '../../utils/api.js'
	import util from '../../utils/utils.js'
	
	export default { 
		data() { 
			return {
				bottom:0,
				typeList1:[{name:'我有厂房',id:1},{name:'我有土地',id:2},{name:'我有楼宇',id:3},{name:'我有项目',id:4}],
				typeList:[{name:'注册企业',id:1},{name:'土地租赁/购买',id:2},{name:'厂房出租',id:3},{name:'项目投资',id:4}],
				type_name:'',
				chain_name:'',
				chain_id:'',
				chain:[],
				imgs:[],
				active_tab:0,
				form:{
					desc:'',
					chain_ids:'',
					chain_names:'',
					type_id:1,
					type_id_1:'',
					type_name_1:'',
					mobile:'',
					files:'',
					title:'',
					from:'投资投资小程序',
					role_id:124,
					create_date:''
				},
				fileName:'',
				condition:[],
				chainList:[],
				isMore:false,
				isshow:false,
				chain_index:'',
				city:uni.getStorageSync('citycity'),
				cityList:[],
			};
		},
		components: {
			chooseChain,
			chain
		}, 
		onLoad(option) {
			this.form.create_date = new Date()
			this.form.type_id =option.type_id||1
			this.getChain()
			// let city = JSON.parse(JSON.stringify(this.city))
			// this.cityList = [city.map(item=>{
			// 	item.children = ''
			// 	return item
			// }),[],[]]
			
			let info = JSON.parse(uni.getStorageSync('userinfo'))
			if(!info.nickname){
				uni.showModal({
					title: '提示',
					content: '请登录后进行发布',
					success: function (res) {
							if (res.confirm) {
									uni.switchTab({
										url:'/pages/my/my'
									})
							} else if (res.cancel) {
									uni.navigateBack({
										delta:info
									})
							}
					}
				});
			}
			this.form.contact = info.nickname
			this.form.mobile = info.mobile
		},
		methods:{
			onGetPhoneNumber(e){
				if(!e.detail.code){
					uni.showToast({
						title:'此功能需要验证手机号',
						icon:'none',
						duration:2500
					})
					return
				}
				getWxappUserPhoneByCode({code:e.detail.code}).then(res=>{
					this.form.mobile = res.data.phone_info.phoneNumber
				})
			},
			cityChange1(e){
				let column = e.detail.column
				let index = e.detail.value
				if(column == 0){
					this.cityList = [this.cityList[0],[],[]]
					this.$nextTick(()=>{
						this.cityList = [this.cityList[0],this.city[index].children,[]]
					})
					console.log(this.cityList)
				}else if(column==1){
					this.cityList = [this.cityList[0],this.cityList[1],this.cityList[1][index].children]
				}
			},
			cityChange(val){
				let index = val.detail.value
				if(index[0]>0&&index[1]>0&&index[2]>0){
					this.city_id = this.city[index[0]].children[index[1]].children[index[2]].id
					this.city_name = this.city[index[0]].children[index[1]].children[index[2]].city_name
					this.form.city_ids = this.city[index[0]].id+','+ this.city[index[0]].children[index[1]].id +',' + this.city[index[0]].children[index[1]].children[index[2]].id
					this.form.city_names = this.city[index[0]].city_name+','+ this.city[index[0]].children[index[1]].city_name +',' + this.city[index[0]].children[index[1]].children[index[2]].city_name
				}else if(index[0]>0&&index[1]>0){
					this.city_id = this.city[index[0]].children[index[1]].id
					this.city_name = this.city[index[0]].children[index[1]].city_name
					this.form.city_ids = this.city[index[0]].id+','+ this.city[index[0]].children[index[1]].id
					this.form.city_names = this.city[index[0]].city_name+','+ this.city[index[0]].children[index[1]].city_name
				}else if(index[0]>0){
					this.city_id = this.city[index[0]].id
					this.city_name = this.city[index[0]].city_name
					this.form.city_ids = this.city_id
					this.form.city_names = this.city_name
				}else{
					this.city_id =''
					this.city_name =''
					this.form.city_ids = ''
					this.form.city_names = ''
				}
			},
			
			changeChain(e){
				this.chain_index = e.detail.value
				let item = this.chainList[this.chain_index]
				this.form.chain_ids = item.chain_id||''
				this.form.chain_names = item.chain_name||''
			},
			toPage(page){
				uni.redirectTo({
					url:`/pages/${page}/${page}`
				})
			},
			changeZc(type){
				let index = this.condition.findIndex(item=>item == type)
				if(index>-1){
					this.condition.splice(index,1)
				}else{
					console.log(index,this.condition)
					this.condition.push(type)
				}
			},
			typeChange(val){
				this.form.type_id_1 = this.typeList[val.detail.value].id
				this.form.type_name_1 = this.typeList[val.detail.value].name
			},
			getChain(){
				if(uni.getStorageSync('myChain')){
					this.chainList=uni.getStorageSync('myChain')
				}
			},
			cChain(list){
				this.chain = list
				this.form.chain_names=''
				this.form.chain_ids=''
				this.chain.forEach((item,index)=>{
					this.form.chain_names += item.chain_name + ','
					this.form.chain_ids += item.chain_id + ','
				})
				this.form.chain_names=this.form.chain_names.slice(0,this.form.chain_names.length-1)
				this.form.chain_ids=this.form.chain_ids.slice(0,this.form.chain_ids.length-1)
			},
			toChooseChain(){
				// this.isshow=true
				this.$refs.chooseChain.show(this.chain)
			},
			chooseImage(){
					uni.chooseImage({
						success:(res)=>{
							const tempFilePaths = res.tempFilePaths;
							uni.showLoading({ mask:true,
								title:'正在上传'
							})
							tempFilePaths.forEach((item,index)=>{
								uni.uploadFile({
									url:'https://bigdataapi.parkic.com/api/UploadFife',		//post请求的地址
									filePath:item,
									name:'file',	
									success: (uploadFileRes) => {
										var obj = JSON.parse(uploadFileRes.data);
										this.imgs.push(obj.data.url)
										if(index==(tempFilePaths.length-1)){
											uni.hideLoading()
										}
									},
									fail:(err)=>{
										uni.showToast({
											title:'上传失败',
											icon:'none'
										})
									}
								})
							})
						}
					})
				},
				delImg(index){
					this.imgs.splice(index,1)
				},
				updateF(){
					let that = this
					uni.chooseMessageFile({
						count: 1,
						success: res => {
							if(res.tempFiles[0].name.indexOf(".pdf")==-1){
								uni.showToast({
									title:'暂时仅支持pdf格式的文件',
									icon:'none'
								})
								return
							}
							uni.showLoading({ mask:true,
								title:'正在上传'
							})
							uni.uploadFile({
								url:'https://invest.gztzcj.com/api/UploadFile',		//post请求的地址
								filePath:res.tempFiles[0].path, 
								name:'file',	
								formData:{
									location:1
								},
								success: (uploadFileRes) => {
									that.form.files_name = res.tempFiles[0].name
									that.form.files = JSON.parse(uploadFileRes.data).data.url
									uni.hideLoading()
								},
								fail:(err)=>{
									uni.showToast({
										title:'上传失败',
										icon:'none'
									})
								}
							})
						}
					})
				},
				fbInfo(){
					if(!this.form.mobile){
						uni.showToast({
							title:'请填写联系方式后进行发布',
							icon:'none'
						})
						return
					}
					if(!this.form.chain_ids){
						uni.showToast({
							title:'请选择产业链',
							icon:'none'
						})
						return
					}
					if(!this.form.type_id_1){
						uni.showToast({
							title:'请选择'+(this.form.type_id==1?'投资':'招商')+'类型',
							icon:'none'
						})
						return
					}
					uni.showLoading({
						title:'正在发布'
					})
					this.form.create_date = util.formatDate1(this.form.create_date)
					// this.form.img = this.imgs.join(',')
					// this.form.condition = this.condition.join(',')
					tzzs.getGanzhouNeedsSubmit(this.form).then(res=>{
						if(res.status==1){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							setTimeout(()=>{
								let url = this.form.type_id==1?'/pages/parkList/parkList':'/pages/companyList/companyList'
								uni.redirectTo({
									url,
								})
							},1000)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
						// uni.hideLoading()
					})
				}
		}
	}
</script>

<style scoped lang="scss">
	button{
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0rpx;
		padding-right: 0rpx;
		box-sizing: border-box;
		// font-size: 36rpx;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 10rpx;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background:none;
		// width: 100%;
		// height: 100%;
		border: none !important;
	}
.more{
	padding: 28rpx 24rpx;
	width: calc(100% - 48rpx);
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #BF9A5C;
	font-weight: 800;
	position: relative;
	.ismore{
		position: absolute;
		border-top: 2rpx solid #BF9A5C;
		border-right: 2rpx solid #BF9A5C;
		right: 20rpx;
		top: 48rpx;
		height: 12rpx;
		width: 12rpx;
		transform: rotate(-45deg);
	}
	.ismore1{
		top: 40rpx;
		transform: rotate(135deg);
	}
	.more_text{
		font-weight: 500;
		font-size: 28rpx;
		color: #BF9A5C;
		margin-right: 28rpx;
	}
}
	.imgList{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		justify-content: space-between;
		.shangchuan{
			width: 80rpx;
			height: 80rpx;
			padding: 60rpx;
			margin: 10rpx 0;
			background-color: #d5d5d5;
			border-radius: 8rpx;
		}
		.image{
			width: 30%;
			margin: 10rpx 0;
			position: relative;
			.img{
				width: 200rpx;
				height: 200rpx;
				border-radius: 12rpx;
				background-color: rgba(0,0,0,.5);
			}
			.close{
				position: absolute;
				top:-12rpx;
				right: -12rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
// .open{
// 	width: 100%;
// 	height: 100%;
// 	background-color: rgba($color: #000000, $alpha: .5);
// 	overflow:auto;
	.all{
		position: absolute;
		bottom: 60rpx;
		width: 94%;
		left: 3%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 16rpx;
		font-size: 32rpx;
	}
	.bot{
		width: calc(100% - 60rpx);
		padding: 30rpx;
		background-color: #fff;
	}
// }
		.flex_c{
				width: 100%;
				height: 88rpx;
				display: flex;
				justify-content: space-between;
		}
		.pic{
			width: calc(50% - 12rpx);
		}
		.pic1{
			width: 100%;
			margin-bottom: 20rpx;
		}
		.select{
			width: calc(100% - 40rpx);
			height: 64rpx;
			color: #999999;
			line-height: 64rpx;
			background-color: #fff;
			border-radius: 8rpx;
			padding: 0 20rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.select_a{
			color: #333;
		}
		.text_a{
			width: calc(100% - 40rpx);
			background-color: #fff;
			border-radius: 8rpx;
			height: 220rpx;
			padding: 20rpx;
		}
		.text_a1{
			width: calc(100% - 40rpx);
			background-color: #fff;
			border-radius: 8rpx;
			padding: 20rpx;
		}
.index_title{
	width: 144rpx;
	height: 50rpx;
	font-size: 36rpx;
	font-weight: 700;
	color: #333333;
	line-height: 50rpx;
	margin-left: 32rpx;
	margin-top: 30rpx;
}
.title1{
	margin: 80rpx 40rpx 40rpx 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 36rpx;
	font-weight: 700;
	color: #333333;
	.more{
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 26rpx;
	}
}
.info_fb{
	width: calc(100% - 104rpx);
	margin: 40rpx 32rpx 0;
	height: 140rpx;
	background: linear-gradient(180deg, #FFF1EB 0%, #FEDFD2 100%);
	border-radius: 16rpx;
	padding: 20rpx;
	position: relative;
}
.flex_info{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	color: 	#616161;
	.jrfb{
		background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/jrfb.png) no-repeat;
		background-size: 100% 100%;
		width: 166rpx;
		height: 60rpx;
		margin-left: -28rpx;
		margin-right: 20rpx;
		margin-top: 4rpx;
	}
	.bg_num{
		width: 40rpx;
		height: 56rpx;
		background: linear-gradient(180deg, #BF9A5C33 0%, #BF9A5C 100%);
		box-shadow: 0rpx 2rpx 6rpx 0rpx #BF9A5C33;
		border-radius: 4rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 56rpx;
		margin: 0 2rpx;
		text-align: center;
	}
}
.flex_info1{
	justify-content: left;
}
.bottom12{
	position: absolute;
	bottom: 24rpx;
	width: calc(100% - 40rpx);
}
.orange14{
	font-size: 32rpx;
	color: #BF9A5C;
	margin-top: -8rpx;
	font-weight: 800;
}

.item_i{
	width: calc(100% - 48rpx);
	padding: 28rpx 24rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 2rpx solid #e7e7e7;
	.mobile{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	input{
		width: 100%;
	}
	.img{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0 0;
		.image{
			width: 48%;
			height: 200rpx;
			position: relative;
			.close{
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				width: 32rpx;
				height: 32rpx;
			}
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.item_t{
		position: relative;
		width: 100%;
		// left: 16rpx;
		font-size: 32rpx;
		color:#333;
		margin-bottom: 28rpx;
	}
	.right{
		// text-align: right;
		width: 100%;
		color: #666;
		font-size: 28rpx;
	}
	.flex_zc{
		display: flex;
		position: relative;
		flex-wrap: wrap;
		.close{
			position: absolute;
			top:-12rpx;
			right: -12rpx;
			width: 32rpx;
			height: 32rpx;
		}
		.zc_item{
			// padding: 0 20rpx;
			width: 100rpx;
			height: 44rpx;
			line-height: 44rpx;
			border: 2rpx solid #BF9A5C;
			color: #BF9A5C;
			margin-right: 20rpx;
			// margin-bottom: 10rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 8rpx;
		}
		.zc_item1{
			margin-right: 20rpx;
			// margin-left: 20rpx;
		}
		.active{
			color: #fff;
			background-color: #BF9A5C;
		}
	}
	.iphone{
		display: flex;
		align-items: center;
	}
	.must::before{
		position: absolute;
		content:' ';
		background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/must.png) no-repeat;
		background-size: 100% 100%;
		width: 16rpx;
		height: 16rpx;
		top: 12rpx;
		left: -24rpx;
	}
}
.btn{
	width: 100%;
	font-size: 44rpx;
	font-weight: 800;
	color: #fff;
	background: #BF9A5C;
	border-radius: 16rpx;
	height: 92rpx;
	line-height: 92rpx;
	text-align: center;
	padding: 0;
	margin-top: 120rpx;
}
.zs_type{
	// font-family: '楷体';
	font-size: 36rpx;
	font-weight: 800;
	padding: 0rpx 0 40rpx;
	display: flex;
	justify-content: center;
	width: 100%;
	.ymt_type_i{
		color:#333;
		position: relative;
		// width: 140rpx;
		text-align: center;
		margin: 0 20rpx;
	}
	.active{
		color: #BF9A5C;
		&::after{
			content: ' ';
			position: absolute;
			width: 100rpx;
			height: 6rpx;
			border-radius: 3rpx;
			bottom:-16rpx;
			background-color: #BF9A5C;
			left: 20rpx;
		}
	}
}
.chain_v{
	position: fixed;
	bottom: 0rpx;
	left: 0;
	box-shadow: 0 -8rpx 8rpx 0 rgba($color: #000000, $alpha: .3);
	z-index: 100;
	width: 100%;
	transition: all 0.3s;
	opacity: 0.5;
	height: 0;
	overflow: auto;
}
.showChain{
	height: 700rpx;
	opacity: 1;
}


.flex_sb{
	width: 100%;
	.zc_item{
		// padding: 0 20rpx;
		width: 100rpx;
		height: 44rpx;
		line-height: 44rpx;
		border: 2rpx solid #BF9A5C;
		background: #BF9A5C;
		color: #fff;
		margin-right: 20rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 8rpx;
		white-space: nowrap;
	}
}


</style>
<style>
.uni-date-x--border {
	border:none !important;
}
.uni-date-x {
	padding: 0 !important;
}
</style>
